<!-- 宠物信息 -->
<template>
    <div >
        <div class='table-page-search-wrapper'>
            <a-form layout='inline'>
               <a-row :gutter='48'>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="手机号">
                            <a-input v-model="phone" allow-clear placeholder="请输入用户手机号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="用户ID">
                            <a-input v-model="userId" allow-clear placeholder="请输入用户ID" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="爱宠昵称">
                            <a-input v-model="nickname" allow-clear placeholder="请输入爱宠昵称" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="宠物种类">
                            <a-select v-model="speciesId" placeholder="请选择" allowClear @change="selSpec">
                                <a-select-option v-for="(item,i) in specList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="宠物品种">
                            <a-select v-model="breedId" placeholder="请选择" allowClear @change="getData">
                                <a-select-option v-for="(item,i) in breedList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="宠物性别">
                            <a-select v-model="sex" placeholder="请选择" allowClear @change="getData">
                                <a-select-option v-for="(item,i) in sexList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="绝育状态">
                            <a-select v-model="sterilization" placeholder="请选择" allowClear @change="getData">
                                <a-select-option v-for="(item,i) in sterilizationList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="出生日期">
                            <a-date-picker v-model="birthDate" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" @change="getData"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md='8' :sm='24'>
                        <a-form-item >
                            <a-button type='primary'>查询</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>  

        <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="{ pageSize: 10, total: total ,showSizeChanger: true,pageSize: size, }" size="small">
            <div slot="userId" slot-scope="userId,record">
                <div>手机号：{{record.phone}}</div>
                <div>用户ID：{{userId}}</div>
            </div>
            <div slot="imageUrl" slot-scope="imageUrl,record">
                <div class="flex flexCenter">
                    <a-avatar v-if="imageUrl && imageUrl.substring(0,4) == 'http'" shape="circle" :src="imageUrl" />
                    <div>昵称：{{record.nickname}}</div>
                </div>
                <div>生日：{{record.birthDate}}</div>
            </div>
            <div slot="speciesId" slot-scope="speciesId">
                <span v-for="(item,i) in specList" :key="item.id">
                    <a-tag v-if="item.id == speciesId" :color="colors[i%13]">{{item.name}}</a-tag>
                </span>
            </div>
            <div slot="breedId" slot-scope="breedId">
                <span v-for="(item,i) in allBreedList" :key="item.id">
                    <a-tag v-if="item.id == breedId" :color="colors[i%13]">{{item.name}}</a-tag>
                </span>
            </div>
            <div slot="sex" slot-scope="sex">
                <span v-for="(item,i) in sexList" :key="item.id">
                    <a-tag v-if="item.id == sex" :color="colors[i%13]">{{item.name}}</a-tag>
                </span>
            </div>
            <div slot="health" slot-scope="health,record">
                <a-button type="link" @click="healthEnt(record)">查看</a-button>
            </div>
            <div slot="vaccine" slot-scope="vaccine,record">
                <a-button type="link" @click="vaccineEnt(record)">查看</a-button>
            </div>
        </a-table>
    </div>
</template>

<script>
import { queryPetBreed , queryPetSpecies , queryPetInfo } from '@/api/pet';
import { columns } from './table';
export default {
    data () {
        return {
            brandId: this.global.brandId,
            phone: '',
            userId: '',
            nickname: '',
            birthDate: '', // 生日
            speciesId: undefined,
            specList: [], // 种类ID
            allBreedList: [],
            breedId: undefined,
            breedList: [], // 品种ID
            sex: undefined,
            sexList: [
                { id: '0', name: '弟弟'},{ id: '1', name: '妹妹'},
            ],
            sterilization: undefined,
            sterilizationList: [
                { id: '0', name: '未绝育'},{ id: '1', name: '已绝育'},
            ],
            colors: ['blue','purple','cyan','green','orange','red','pink','brown','indigo','lime','purple','teal','yellow','amber'],
            isload: false,
            dataList: [],
            columns,
            total: 0,
            page: 1,
            size: 10,
        };
    },
    async created(){
        try {
            await this.querySpec()
            this.breedList = await this.queryBreed()
            this.allBreedList = await this.queryBreed();
            this.getData()
        } catch (error) {
            this.$notification['error']({
                message: '提示',
                description: '网路丢失，请稍后再试！',
                duration: 8,
            })
        }
    },
    methods: {
        // 查询宠物种类
        querySpec(){
            let _this = this
            return new Promise((resolve,reject) => {
                queryPetSpecies({'size': 99,'page': 0})
                .then(res=>{
                    if(res.success){
                        _this.specList = res.data.content;
                        resolve()
                    }else{
                        reject(res.errMessage)
                    }
                })
            })
        },
        // 选择宠物种类
        async selSpec(){
            this.breedId = undefined;
            this.breedList = await this.queryBreed()
            this.getData();
        },
        // 查询宠物品种
        queryBreed(){
            let _this = this
            return new Promise((resolve,reject) => {
                queryPetBreed({'size': 99,'page': 0,speciesId: _this.speciesId})
                .then(res=>{
                    if(res.success){
                        resolve(res.data.content)
                    }else{
                        reject(res.errMessage)
                    }
                })
            })
        },
        // 查询数据
        getData(){
            let _this = this
            _this.isload = true
            const params = {
                'brandId': _this.global.brandId,
                'userId': _this.userId,
                'phone': _this.phone,
                'nickname': _this.nickname,
                'speciesId': _this.speciesId,
                'breedId': _this.breedId,
                'sex': _this.sex,
                'sterilization': _this.sterilization,
                'birthDate': _this.birthDate,
                'size':_this.size,
                'page':_this.page - 1,
            }
            queryPetInfo(params)
            .then(res=>{
                _this.isload = false
                if(res.success){
                    _this.dataList = res.data.content
                    _this.total = res.data.totalElements
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        // 查看健康信息
        healthEnt(item){
            this.$router.push({ path: '/pet/petHealthInfo',query:{petId:item.id,speciesId:item.speciesId, speciesName: item.speciesName,nickname: item.nickname }})
        },
        // 查看疫苗信息
        vaccineEnt(item){
            this.$router.push({ path: '/pet/vaccineRecord',query:{petId:item.id,speciesId:item.speciesId, speciesName: item.speciesName,nickname: item.nickname }})
        }
    }
}

</script>
<style scoped>

</style>